<template>
  <div class="dashboard-page">
    <aside class="sidebar">
      <div class="profile-card">
        <img class="avatar" :src="adminAvatar" alt="Sarah Smith" />
        <div class="profile-info">
          <span class="name">Sarah Smith</span>
          <span class="role">Admin</span>
        </div>
      </div>

      <nav class="sidebar-menu">
        <template v-for="item in menu" :key="item.label">
          <RouterLink
            v-if="item.path"
            :to="item.path"
            :class="['menu-item', item.active && 'active']"
          >
            <i :class="['menu-icon', item.icon]"></i>
            <span>{{ item.label }}</span>
          </RouterLink>
          <button v-else :class="['menu-item', item.active && 'active']">
            <i :class="['menu-icon', item.icon]"></i>
            <span>{{ item.label }}</span>
          </button>
        </template>
      </nav>
    </aside>

    <main class="main-content">
      <header class="main-header">
        <div class="brand">
          <img :src="hospitalLogo" class="brand-logo" alt="Hospital Logo" />
          <div>
            <h1 class="page-title">Dashboard</h1>
            <p>Lorem ipsum reuervver vetivue is thormation</p>
          </div>
        </div>

        <div class="upgrade-banner">
          <div class="banner-content">
            <h2>Lorem ipsum reuervver vetivue is thormation</h2>
            <p>ipsum reuervver vetivue reuervver</p>
          </div>
          <button class="btn-upgrade">Upgrade Now</button>
          <button class="btn-close">✕</button>
        </div>

        <div class="header-actions">
          <button class="icon-btn"><i class="ri-notification-3-line"></i></button>
          <button class="icon-btn"><i class="ri-settings-3-line"></i></button>
        </div>
      </header>

      <section class="stats-row">
        <div v-for="card in stats" :key="card.title" class="stat-card">
          <div class="stat-icon" :class="card.color">
            <i :class="card.icon"></i>
          </div>
          <div>
            <span class="stat-value">{{ card.value }}</span>
            <span class="stat-title">{{ card.title }}</span>
          </div>
        </div>
      </section>

      <section class="charts-row">
        <div class="chart-card">
          <header class="card-header">
            <h3>Hospital Survey</h3>
            <div class="legend">
              <span class="dot new"></span> New Patients
              <span class="dot old"></span> Old Patients
            </div>
          </header>
          <svg class="line-chart" viewBox="0 0 420 220" preserveAspectRatio="none">
            <g class="grid">
              <line x1="40" y1="20" x2="400" y2="20"></line>
              <line x1="40" y1="70" x2="400" y2="70"></line>
              <line x1="40" y1="120" x2="400" y2="120"></line>
              <line x1="40" y1="170" x2="400" y2="170"></line>
              <line x1="40" y1="210" x2="400" y2="210"></line>
            </g>
            <polyline
              class="line old"
              points="40,160 90,120 140,150 190,130 240,145 290,120 340,140 390,70"
            ></polyline>
            <polyline
              class="line new"
              points="40,200 90,170 140,130 190,150 240,110 290,130 340,90 390,40"
            ></polyline>
            <g class="axis">
              <text x="40" y="205">Jan</text>
              <text x="80" y="205">Feb</text>
              <text x="120" y="205">Mar</text>
              <text x="160" y="205">Apr</text>
              <text x="200" y="205">May</text>
              <text x="240" y="205">Jun</text>
              <text x="280" y="205">Jul</text>
              <text x="320" y="205">Aug</text>
              <text x="360" y="205">Sep</text>
              <text x="395" y="205">Oct</text>
            </g>
          </svg>
        </div>

        <div class="chart-card">
          <header class="card-header">
            <h3>Common Diseases Report</h3>
          </header>
          <svg class="bar-chart" viewBox="0 0 440 220" preserveAspectRatio="none">
            <g class="grid">
              <line x1="30" y1="30" x2="410" y2="30"></line>
              <line x1="30" y1="80" x2="410" y2="80"></line>
              <line x1="30" y1="130" x2="410" y2="130"></line>
              <line x1="30" y1="180" x2="410" y2="180"></line>
            </g>
            <g class="bars">
              <g transform="translate(40,0)">
                <rect class="bar-old" x="0" y="80" width="24" height="130"></rect>
                <rect class="bar-new" x="26" y="110" width="24" height="100"></rect>
              </g>
              <g transform="translate(110,0)">
                <rect class="bar-old" x="0" y="60" width="24" height="150"></rect>
                <rect class="bar-new" x="26" y="95" width="24" height="115"></rect>
              </g>
              <g transform="translate(180,0)">
                <rect class="bar-old" x="0" y="70" width="24" height="140"></rect>
                <rect class="bar-new" x="26" y="120" width="24" height="90"></rect>
              </g>
              <g transform="translate(250,0)">
                <rect class="bar-old" x="0" y="65" width="24" height="145"></rect>
                <rect class="bar-new" x="26" y="105" width="24" height="105"></rect>
              </g>
              <g transform="translate(320,0)">
                <rect class="bar-old" x="0" y="90" width="24" height="120"></rect>
                <rect class="bar-new" x="26" y="125" width="24" height="85"></rect>
              </g>
              <g transform="translate(390,0)">
                <rect class="bar-old" x="0" y="95" width="24" height="115"></rect>
                <rect class="bar-new" x="26" y="135" width="24" height="75"></rect>
              </g>
            </g>
            <g class="axis">
              <text x="45" y="205">Mon</text>
              <text x="115" y="205">Tue</text>
              <text x="185" y="205">Wed</text>
              <text x="255" y="205">Thu</text>
              <text x="325" y="205">Fri</text>
              <text x="395" y="205">Sat</text>
            </g>
          </svg>
        </div>
      </section>

      <section class="bottom-row">
        <div class="table-card">
          <header class="card-header">
            <h3>Booked Appointment</h3>
            <button class="ghost-btn" type="button" @click="addAppointment">+ Add Appointment</button>
          </header>
          <table>
            <thead>
              <tr>
                <th>#</th>
                <th>Patient Name</th>
                <th>Assigned Doctor</th>
                <th>Date</th>
                <th>Diseases</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="appointment in appointments" :key="appointment.id">
                <td>{{ appointment.no }}</td>
                <td>{{ appointment.patient }}</td>
                <td class="link-text">{{ appointment.doctor }}</td>
                <td>{{ appointment.date }}</td>
                <td>
                  <span class="badge badge-warning">{{ appointment.disease }}</span>
                </td>
                <td class="actions">
                  <button class="icon-btn" type="button" title="View" @click="viewAppointment(appointment)"><i class="ri-eye-line"></i></button>
                  <button class="icon-btn" type="button" title="Delete" @click="removeAppointment(appointment.id)"><i class="ri-delete-bin-line"></i></button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="table-card doctors-card">
          <header class="card-header">
            <h3>Doctors List</h3>
            <div class="card-header-actions">
              <button class="ghost-btn" type="button" @click="addDoctor">+ Add Doctor</button>
            </div>
          </header>
          <table>
            <thead>
              <tr>
                <th>#</th>
                <th>Doctors Name</th>
                <th>Status</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="doctor in doctors" :key="doctor.id">
                <td>{{ doctor.no }}</td>
                <td class="doctor-cell">
                  <img :src="doctor.avatar" alt="" />
                  <span>{{ doctor.name }}</span>
                </td>
                <td>
                  <span class="badge" :class="doctor.available ? 'badge-success' : 'badge-danger'">
                    {{ doctor.available ? 'Available' : 'Absent' }}
                  </span>
                </td>
                <td class="actions">
                  <button class="icon-btn" type="button" title="Toggle Status" @click="toggleDoctorStatus(doctor.id)">
                    <i class="ri-refresh-line"></i>
                  </button>
                  <button class="icon-btn" type="button" title="Remove" @click="removeDoctor(doctor.id)">
                    <i class="ri-delete-bin-line"></i>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const adminAvatar = 'https://i.pravatar.cc/100?img=48'
const hospitalLogo =
  "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><defs><linearGradient id='a' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' stop-color='%23ff86d5'/><stop offset='100%' stop-color='%23907cff'/></linearGradient></defs><rect x='4' y='4' width='56' height='56' rx='18' fill='%23ffffff' stroke='url(%23a)' stroke-width='4'/><path d='M32 14c9.9 0 18 8.1 18 18s-8.1 18-18 18S14 41.9 14 32 22.1 14 32 14zm0 6a12 12 0 100 24 12 12 0 000-24zm1.5 5v5.5H39v3H33.5V39h-3v-5.5H25v-3h5.5V25h3z' fill='url(%23a)'/></svg>"

const sidebarMenu = [
  { label: 'Menu', icon: 'ri-compass-3-line', path: '/' },
  { label: 'Dashboard', icon: 'ri-dashboard-2-line', path: '/dashboard' },
  { label: 'Patient Form', icon: 'ri-calendar-check-line', path: '/patient-form' },
  { label: 'Patient Profile', icon: 'ri-user-3-line', path: '/patient-profile' },
  { label: 'Payment', icon: 'ri-bill-line', path: '/payment-table' },
  { label: 'Reports', icon: 'ri-bar-chart-2-line', path: null },
  { label: 'Pharmacy', icon: 'ri-capsule-line', path: null },
  { label: 'Settings', icon: 'ri-equalizer-line', path: null },
  { label: 'Logout', icon: 'ri-shut-down-line', path: null },
]

const menu = computed(() =>
  sidebarMenu.map((item) => ({
    ...item,
    active: item.path === route.path,
  }))
)

const stats = [
  { title: 'OPD Today', value: 250, icon: 'ri-hospital-line', color: 'accent-orange' },
  { title: 'Relieved Today', value: 189, icon: 'ri-heart-pulse-line', color: 'accent-red' },
  { title: 'In Patient Today', value: 300, icon: 'ri-hotel-bed-line', color: 'accent-yellow' },
  { title: 'Ventilator', value: 52, icon: 'ri-lungs-line', color: 'accent-purple' },
]

const appointmentsSeed = ref(4)
const sampleDiseases = ['Fever', 'Cholera', 'Dengue', 'Typhoid']
const samplePatients = ['Ramesh Kumar', 'Aditi Sharma', 'Rahul Patel', 'Sneha Rao']

const appointments = ref([
  { id: 1, no: '001', patient: 'Ramesh Kumar', doctor: 'Dr Jacob Ryan', date: '12 Jan 2022', disease: 'Fever' },
  { id: 2, no: '002', patient: 'Ramesh Kumar', doctor: 'Dr Jacob Ryan', date: '12 Jan 2022', disease: 'Cholera' },
  { id: 3, no: '003', patient: 'Ramesh Kumar', doctor: 'Dr Jacob Ryan', date: '12 Jan 2022', disease: 'Fever' },
])

function addAppointment() {
  const index = Math.floor(Math.random() * samplePatients.length)
  const disease = sampleDiseases[Math.floor(Math.random() * sampleDiseases.length)]
  const count = appointmentsSeed.value.toString().padStart(3, '0')
  appointments.value.push({
    id: Date.now(),
    no: count,
    patient: samplePatients[index] || '未知患者',
    doctor: ['Dr Jacob Ryan', 'Dr Rubina Delayer', 'Dr Smith Rayan'][index % 3] || '未知医生',
    date: new Date().toLocaleDateString('zh-CN'),
    disease: disease || '未知疾病',
  })
  appointmentsSeed.value += 1
}

function removeAppointment(id: number) {
  appointments.value = appointments.value.filter((item) => item.id !== id)
}

function viewAppointment(appointment: (typeof appointments.value)[number]) {
  window.alert(`预约详情\n患者：${appointment.patient}\n疾病：${appointment.disease}\n医生：${appointment.doctor}`)
}

const doctorSeed = ref(5)
const doctors = ref([
  { id: 1, no: '01', name: 'Dr Jacob Ryan', avatar: 'https://i.pravatar.cc/80?img=12', available: true },
  { id: 2, no: '02', name: 'Dr Rubina Delayer', avatar: 'https://i.pravatar.cc/80?img=28', available: true },
  { id: 3, no: '03', name: 'Dr Smith Rayan', avatar: 'https://i.pravatar.cc/80?img=32', available: true },
  { id: 4, no: '04', name: 'Dr Jacob Ryan', avatar: 'https://i.pravatar.cc/80?img=15', available: false },
])

function addDoctor() {
  const id = doctorSeed.value
  doctors.value.push({
    id: Date.now(),
    no: id.toString().padStart(2, '0'),
    name: (
      ['Dr Jacob Ryan', 'Dr Rubina Delayer', 'Dr Smith Rayan', 'Dr Sanjay Mehta'][id % 4] ??
      '未知医生'
    ),
    avatar: `https://i.pravatar.cc/80?img=${10 + id}`,
    available: id % 2 === 0,
    })
    doctorSeed.value += 1
}

function removeDoctor(id: number) {
  doctors.value = doctors.value.filter((doctor) => doctor.id !== id)
}

function toggleDoctorStatus(id: number) {
  const doctor = doctors.value.find((d) => d.id === id)
  if (doctor) {
    doctor.available = !doctor.available
  }
}
</script>

<style scoped>
@import './shared-dashboard.css';

.upgrade-banner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 24px;
  padding: 20px 26px;
  gap: 20px;
  box-shadow: var(--soft-shadow);
}

.banner-content h2 {
  margin: 0;
  font-size: 16px;
  color: var(--text-body);
}

.banner-content p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.btn-upgrade {
  border: none;
  background: linear-gradient(135deg, #ff89d6, #a788ff);
  color: #fff;
  padding: 10px 20px;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: var(--soft-shadow);
}

.btn-close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 18px;
}

.stats-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.stat-card {
  background: var(--card-bg);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  gap: 18px;
  align-items: center;
  box-shadow: var(--soft-shadow);
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 24px;
}

.stat-value {
  display: block;
  font-weight: 700;
  font-size: 22px;
}

.stat-title {
  font-size: 13px;
  color: var(--text-muted);
}

.charts-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
}

.chart-card {
  background: var(--card-bg);
  border-radius: 28px;
  padding: 24px;
  box-shadow: var(--soft-shadow);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
}

.legend {
  display: flex;
  gap: 18px;
  font-size: 13px;
  color: var(--text-muted);
}

.legend .dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 999px;
  margin-right: 6px;
}

.legend .new {
  background: #c37df3;
}

.legend .old {
  background: #f27aad;
}

.line-chart,
.bar-chart {
  width: 100%;
  height: 220px;
}

.line-chart .grid line,
.bar-chart .grid line {
  stroke: rgba(148, 123, 255, 0.2);
  stroke-dasharray: 4;
}

.line-chart .line {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-chart .line.new {
  stroke: #c37df3;
}

.line-chart .line.old {
  stroke: #f27aad;
}

.line-chart .axis text,
.bar-chart .axis text {
  font-size: 12px;
  fill: var(--text-muted);
}

.bar-chart .bar-new {
  fill: #c37df3;
  rx: 6;
  ry: 6;
}

.bar-chart .bar-old {
  fill: #f27aad;
  rx: 6;
  ry: 6;
}

.bottom-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
}

.table-card {
  background: var(--card-bg);
  border-radius: 28px;
  padding: 24px;
  box-shadow: var(--soft-shadow);
  overflow: hidden;
}

.table-card table {
  width: 100%;
  border-collapse: collapse;
}

.table-card th {
  text-align: left;
  font-size: 13px;
  color: var(--text-muted);
  padding-bottom: 12px;
}

.table-card td {
  padding: 12px 0;
  font-size: 14px;
  border-top: 1px solid rgba(213, 217, 232, 0.35);
}

.table-card tbody tr:first-child td {
  border-top: none;
}

.actions {
  display: flex;
  gap: 8px;
}

.link-text {
  color: #3681f7;
  font-weight: 600;
}

.doctors-card table td {
  vertical-align: middle;
}

.doctor-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.doctor-cell img {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  object-fit: cover;
}
</style>

